<template>
    <div class="part1">
        <TopNav title="热门推荐">
            <template v-slot:tab>
                <div class="tab">
                <a href="#" class="s-fc3">华语</a>
                <a href="#" class="s-fc3">流行</a>
                <a href="#" class="s-fc3">摇滚</a>
                <a href="#" class="s-fc3">民谣</a>
                <a href="#" class="s-fc3">电子</a>
                </div>
            </template>
        </TopNav>

        <ul class="cover-container f-cb">
            <template v-for="(item,index) in list1" >
                <singleItem :itemData="item" :key="index"></singleItem>
            </template>
        </ul>
    </div>
</template>
<script>
import TopNav from "./top-nav";
import singleItem from "Views/common/single-item";

export default {
  name: "recommendList",

  data() {
    return {
      list1: []
    };
  },

  mounted() {
    this.getRecommendNewSong();
  },

  components: {
    TopNav,
    singleItem
  },

  methods: {
    getRecommendNewSong() {
      this.$api["playlist/songCate"]({
        limit: 8,
        order: "hot"
      }).then(result => {
        this.list1 = result.playlists;
      });
    }
  }
};
</script>
<style lang='scss' scoped>
    .cover-container {
        margin: 20px 0 0 -42px;
        overflow: hidden;
    }

    .mp{
        margin-top: 35px;
    }
</style>